<include file="Public/head" />
<link type="text/css" rel="stylesheet" href="{:get_style_cdnurl()}paimai/yunying/plugin/select2/select2.css" />
<script src="{:get_style_cdnurl()}paimai/yunying/plugin/select2/select2.js" type="text/javascript"></script>
<style type="text/css">
    .employee .employee_left,.employee_right{width: 50%;float:left;}
    .select2-container .select2-choice > .select2-chosen{text-align: center;}
</style>
</head>
<body>
<include file="Public/common_header" />
<div class="mian">
    <include file="Public/sidebar" menu='xtgl.gysgl' />
    <div class="mianR">
        <h3 class='cha'>店铺管理-关联评估师</h3>
        <div class="broker">
            <h4>店铺信息</h4>
            <ul class="broker-area clearfix">
                <li><span>店铺名称：</span><span class="broker-text">{$fourStoreInfo.f_name}</span></li>
                <li><span>联系人：</span><span class="broker-text">{$fourStoreInfo.contact}</span></li>
                <li><span>店铺地址：</span><span class="broker-text">{$fourStoreInfo.addr}</span></li>
                <li><span>联系电话：</span><span class="broker-text">{$fourStoreInfo.phone}</span></li>
                <li><span>所在城市：</span><span class="broker-text">{$bc_city[$fourStoreInfo['city']]}</span></li>
                <li><span>开发人：</span><span class="broker-text">{$fourStoreInfo.developer_name}</span></li>
                <li><span>所属片区：</span><span class="broker-text">{$fourStoreInfo.region_name}</span></li>
            </ul>
        </div>
        <div class="associated-store clearfix">
            <div class="associated-left">
                <h5>评估师</h5>
                <div class="store-search"><input type="text" value="" id="text" placeholder="请输入关键字" /><input type="button" id="search" value="搜索" /></div>
                <ul class="associated-first">
                    <?php foreach ($notinFoursAppraiser as $key => $value): ?>
                        <li id="{$value.emp_id}"><i class="add-btn">添加</i><span class="renew">{$value.real_name}（{$value.count}）</span><em>{$value.username}</em></li>
                    <?php endforeach ?>
                    
                    
                </ul>
                <ul class="associated-last"></ul>
            </div>
            <div class="associated-right">
                <h5>已添加到店铺</h5>
                <ul id="eidtMid">
                    <?php foreach ($foursAppraiser as $k => $v): ?>
                        <li id="{$v.emp_id}"><span class='renew'>{$v.real_name}（{$v.count}）</span><em>{$v.username}</em><i class="delete-btn">删除</i></li>
                    <?php endforeach ?>
  
                </ul>
            </div>
        </div>
        <input type="hidden" value="" id="appraisers">
        <div class="yongBtn">
            <input type="button" value="确认" onclick="makeSure()" name="queding" class="queding">
            <input type="button" onclick="cancel()" class="quxiao" value="取消">            
        </div>
    </div>
</div>
<script type="text/javascript">
$(function(){
    $(".associated-last").hide();
    var oLH=$(".associated-first li").outerHeight(true);
    
    if(($(".associated-first li").length)*oLH>320){
        $(".associated-first").css("overflow-y","scroll");
    }else{
        $(".associated-first").css("overflow-y","auto");
    }
    var oLH1=$(".associated-last li").outerHeight(true);
    if(($(".associated-last li").length)*oLH1>320){
        $(".associated-last").css("overflow-y","scroll");
    }else{
        $(".associated-last").css("overflow-y","auto");
    }
    var oLH2=$(".associated-right ul li").outerHeight(true);
    if(($(".associated-right ul li").length)*oLH2>350){
        $(".associated-right ul").css("overflow-y","scroll");
    }else{
        $(".associated-right ul").css("overflow-y","auto");
    }
    //点击搜索获取输入框的内容与下面的li里的内容匹配，匹配好的li插入
    //associated-last.ul里面并且显示，associated-first.ul隐藏
    $("#search").on("click",function(){
        if($("#text").val()==""){
            $(".associated-first").show()
            $(".associated-last").hide();
            $(".associated-first").prepend($(".associated-last").html());
        }else{
            $("#text").css("border","solid 1px #ccc");
            var oText=$("#text").val();
            var oSpan=$(".associated-left ul li span");
            $(".associated-last").html("");
            for(var i=0;i<oSpan.length;i++){
                if($(oSpan[i]).html().indexOf(oText)!=-1){      
                    var oLi=$(oSpan[i]).parent("li");
                    $(".associated-first").hide()
                    $(".associated-last").show();
                    $(".associated-last").append(oLi);
                }
                
            }
        }
    })
    $(".associated-first").on("click","li i.add-btn",function(){
        var oS=$(this).parent("li").find("span").html();
        var oE=$(this).parent("li").find("em").html();
        var iD=$(this).parent("li").attr("id");
        $(this).parent("li").remove();
        $(".associated-right ul").prepend("<li id="+iD+"><span class='renew'>"+oS+"</span><em>"+oE+"</em><i class='delete-btn'>删除</i></li>");
        if(($(".associated-first li").length)*oLH>320){
        $(".associated-first").css("overflow-y","scroll");
        }else{
            $(".associated-first").css("overflow-y","auto");
        }
    })
    
    $(".associated-last").on("click","li i.add-btn",function(){
        var oS=$(this).parent("li").find("span").html();
        var oE=$(this).parent("li").find("em").html();
        var iD=$(this).parent("li").attr("id");
        $(this).parent("li").remove();  
        $(".associated-right ul").prepend("<li id="+iD+"><span class='renew'>"+oS+"</span><em>"+oE+"</em><i class='delete-btn'>删除</i></li>");
        if(($(".associated-first li").length)*oLH>320){
        $(".associated-first").css("overflow-y","scroll");
        }else{
            $(".associated-first").css("overflow-y","auto");
        }
    })
    
    $(".associated-right ul").on("click","li i.delete-btn",function(){
        var oS1=$(this).parent("li").find("span").html();
        var oE1=$(this).parent("li").find("em").html();
        var iD1=$(this).parent("li").attr("id");
        $(this).parent("li").remove();  
        if($(".associated-first").css("display")=="none"){
            $(".associated-last").prepend("<li id="+iD1+"><span class='renew'>"+oS1+"</span><em>"+oE1+"</em><i class='add-btn'>添加</i>"+"</li")
        }
        if($(".associated-last").css("display")=="none"){
            $(".associated-first").prepend("<li id="+iD1+"><span class='renew'>"+oS1+"</span><em>"+oE1+"</em><i class='add-btn'>添加</i>"+"</li")
        }
    })
})

function makeSure(){
    var param = {};
    var arr = [];
    $("#eidtMid li").each(function(){
        arr.push($(this).attr('id'));
    });
    param.appraiserIds = arr;
    $(".queding").attr("disabled","disabled");
    $.post("/SupplierManage/foursRelationAppraiserPost/fid/{$fourStoreInfo.fid}",param,function(data){
        if(data.code!=200){
            shibai_alert(data.msg,2000)
            $(".queding").removeAttr("disabled").removeAttr("style");
        }else{
            btn_alert("更新成功",1500,function(){
            location.href = '/SupplierManage/index/status/1';
        })
        }
    },"json");
}

// $(".queding").click(function(){
       
//     });

    var arr1=[];
    var arr3 = new Array(); 
    $("#eidtMid li").each(function(){
        arr1.push($(this).attr('id'));
    });
    var cancel1=arr1.sort().toString();
    $('#appraisers').val(cancel1);
    function cancel(){
        var arr2=[];
        $("#eidtMid li").each(function(){
            arr2.push($(this).attr('id'));
        });
        var cance2=arr2.sort().toString();
        var cancel = $("#appraisers").val();
        if(cancel!=cance2){
            $(".yunBei").css("display","block");
            confirm_alert("您已对数据进行了修改,是否需要保存!");
        }else{
            location.href = '/SupplierManage/index/status/1';
        }
    
    }
    $("body").on('click','.cancel',function(){
        location.href = '/SupplierManage/index/status/1';
    })

    $("body").on('click','.determine',function(){
        colse_hide();
        makeSure();
    })


</script>
<include file="Public/foot" />